<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="handleModelUpdate"
    title="月度工作汇报"
    width="1400px"
    :close-on-click-modal="false"
  >
    <div class="monthly-report-form">
      <!-- 本月主要行程 -->
      <div class="form-section">
        <h3 class="section-title" style="color: red;">本月主要行程</h3>
        <div class="schedule-grid">
          <div class="schedule-item">
            <span class="week-label">第一周：</span>
            <el-input v-model="monthlySchedule.week1.summary" placeholder="工作小结" />
            <el-input v-model="monthlySchedule.week1.status" placeholder="完成情况" />
          </div>
          <div class="schedule-item">
            <span class="week-label">第二周：</span>
            <el-input v-model="monthlySchedule.week2.summary" placeholder="工作小结" />
            <el-input v-model="monthlySchedule.week2.status" placeholder="完成情况" />
          </div>
          <div class="schedule-item">
            <span class="week-label">第三周：</span>
            <el-input v-model="monthlySchedule.week3.summary" placeholder="工作小结" />
            <el-input v-model="monthlySchedule.week3.status" placeholder="完成情况" />
          </div>
          <div class="schedule-item">
            <span class="week-label">第四周：</span>
            <el-input v-model="monthlySchedule.week4.summary" placeholder="工作小结" />
            <el-input v-model="monthlySchedule.week4.status" placeholder="完成情况" />
          </div>
        </div>
      </div>

      <!-- 本月业绩统计 -->
      <div class="form-section">
        <h3 class="section-title">本月业绩统计</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-label">本月总计新增客源:</span>
            <el-input v-model="monthlyStats.newCustomers" placeholder="填写数据" />
          </div>
          <div class="stat-item">
            <span class="stat-label">本月总计新增会员:</span>
            <el-input v-model="monthlyStats.newMembers" placeholder="填写数据" />
          </div>
          <div class="stat-item">
            <span class="stat-label">本月总计成交情况:</span>
            <el-input v-model="monthlyStats.dealStatus" placeholder="填写数据" />
          </div>
        </div>
      </div>

      <!-- 本月工作小结 -->
      <div class="form-section">
        <h3 class="section-title">本月工作小结及其他事项说明:</h3>
        <el-input
          type="textarea"
          v-model="monthlySummary"
          :rows="3"
          placeholder="本月 难点及失误，成就及其他事务总结 说明"
        />
      </div>

      <!-- 下月工作计划 -->
      <div class="form-section">
        <h3 class="section-title" style="color: red;">下月工作计划</h3>
        <div class="schedule-grid">
          <div class="schedule-item">
            <span class="week-label">第一周：</span>
            <el-input v-model="nextMonthPlan.week1.task1" placeholder="计划任务 1" />
            <el-input v-model="nextMonthPlan.week1.task2" placeholder="计划任务 2" />
            <el-input v-model="nextMonthPlan.week1.task3" placeholder="计划任务 3" />
            <el-input v-model="nextMonthPlan.week1.task4" placeholder="计划任务 4" />
            <el-input v-model="nextMonthPlan.week1.task5" placeholder="计划任务 5" />
          </div>
          <div class="schedule-item">
            <span class="week-label">第二周：</span>
            <el-input v-model="nextMonthPlan.week2.task1" placeholder="计划任务 1" />
            <el-input v-model="nextMonthPlan.week2.task2" placeholder="计划任务 2" />
            <el-input v-model="nextMonthPlan.week2.task3" placeholder="计划任务 3" />
            <el-input v-model="nextMonthPlan.week2.task4" placeholder="计划任务 4" />
            <el-input v-model="nextMonthPlan.week2.task5" placeholder="计划任务 5" />
          </div>
          <div class="schedule-item">
            <span class="week-label">第三周：</span>
            <el-input v-model="nextMonthPlan.week3.task1" placeholder="计划任务 1" />
            <el-input v-model="nextMonthPlan.week3.task2" placeholder="计划任务 2" />
            <el-input v-model="nextMonthPlan.week3.task3" placeholder="计划任务 3" />
            <el-input v-model="nextMonthPlan.week3.task4" placeholder="计划任务 4" />
            <el-input v-model="nextMonthPlan.week3.task5" placeholder="计划任务 5" />
          </div>
          <div class="schedule-item">
            <span class="week-label">第四周：</span>
            <el-input v-model="nextMonthPlan.week4.task1" placeholder="计划任务 1" />
            <el-input v-model="nextMonthPlan.week4.task2" placeholder="计划任务 2" />
            <el-input v-model="nextMonthPlan.week4.task3" placeholder="计划任务 3" />
            <el-input v-model="nextMonthPlan.week4.task4" placeholder="计划任务 4" />
            <el-input v-model="nextMonthPlan.week4.task5" placeholder="计划任务 5" />
          </div>
        </div>
      </div>

      <!-- 下月业绩目标 -->
      <div class="form-section">
        <h3 class="section-title">下月业绩目标</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-label">下月目标新增客源:</span>
            <el-input v-model="nextMonthStats.newCustomers" placeholder="填写数据" />
          </div>
          <div class="stat-item">
            <span class="stat-label">下月目标新增会员:</span>
            <el-input v-model="nextMonthStats.newMembers" placeholder="填写数据" />
          </div>
          <div class="stat-item">
            <span class="stat-label">下月目标成交情况:</span>
            <el-input v-model="nextMonthStats.dealStatus" placeholder="填写数据" />
          </div>
        </div>
      </div>

      <!-- 下月工作安排 -->
      <div class="form-section">
        <h3 class="section-title">下月工作安排及其他事项说明:</h3>
        <el-input
          type="textarea"
          v-model="nextMonthSummary"
          :rows="3"
          placeholder="本月 难点及失误，成就及其他事务总结 说明"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button @click="handleModelUpdate(false)">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import { ElMessage } from 'element-plus';

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

// 定义组件事件
const emit = defineEmits(['update:visible', 'submit']);

// 本月行程数据
const monthlySchedule = ref({
  week1: { summary: '', status: '' },
  week2: { summary: '', status: '' },
  week3: { summary: '', status: '' },
  week4: { summary: '', status: '' }
});

// 本月业绩统计
const monthlyStats = ref({
  newCustomers: '',
  newMembers: '',
  dealStatus: ''
});

// 本月工作小结
const monthlySummary = ref('');

// 下月计划
const nextMonthPlan = ref({
  week1: { task1: '', task2: '', task3: '', task4: '', task5: '' },
  week2: { task1: '', task2: '', task3: '', task4: '', task5: '' },
  week3: { task1: '', task2: '', task3: '', task4: '', task5: '' },
  week4: { task1: '', task2: '', task3: '', task4: '', task5: '' }
});

// 下月业绩目标
const nextMonthStats = ref({
  newCustomers: '',
  newMembers: '',
  dealStatus: ''
});

// 下月工作安排
const nextMonthSummary = ref('');

// 处理弹窗显示状态更新
const handleModelUpdate = (value) => {
  emit('update:visible', value);
};

// 提交表单
const handleSubmit = () => {
  const formData = {
    monthlySchedule: { ...monthlySchedule.value },
    monthlyStats: { ...monthlyStats.value },
    monthlySummary: monthlySummary.value,
    nextMonthPlan: { ...nextMonthPlan.value },
    nextMonthStats: { ...nextMonthStats.value },
    nextMonthSummary: nextMonthSummary.value
  };
  emit('submit', formData);
  ElMessage.success('月度工作汇报提交成功！');
  handleModelUpdate(false);
};
</script>

<style scoped>
.monthly-report-form {
  padding: 24px;
}

.form-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.schedule-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.week-label {
  width: 200px;
  color: #606266;
  font-size: 14px;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-label {
  width: 200px;
  color: #606266;
  font-size: 14px;
}

.el-input {
  width: 100%;
  min-width: 200px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 32px;
}
</style>